<template>
	<view id="container" class="container" :style="{ backgroundColor: backgroundColor }">
		<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
		<view class="top-system">
			<navigator animation-type="pop-out" animation-duration="300" open-type="navigateBack" ><uni-icons type="left" size="30"></uni-icons></navigator>
			<text>{{ title }}</text>
			<view>
				<uni-icons class="top-icon" @tap="() => emit('onTap', icon)" v-for="icon in iconList" :type="icon" size="30"></uni-icons>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance } from 'vue'

const instance = getCurrentInstance();
const statusBarHeight = ref(0)
defineProps({
	title: {
		type: String,
		default: ''
	},
	iconList: {
		type: Array,
		default: () => []
	},
	backgroundColor: {
		type: String,
		default: '#fff'
	}
})

//向父组件传值
const emit = defineEmits()
onMounted(() => {
	const systemInfo = uni.getSystemInfoSync();
	statusBarHeight.value = systemInfo.statusBarHeight; //获取状态栏高度
	const query = uni.createSelectorQuery().in(instance.proxy)
	query.select('#container').boundingClientRect((rest) => {
		emit('topBarHeight', rest.height)
	}).exec();
})
</script>

<style lang="scss" scoped>
.container{
	width: 100%;
	padding-bottom: 15rpx;
	.status-bar{
		width: 100%;
	}
	.top-system{
		padding: 2rpx 10rpx 2rpx 10rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.top-icon{
			margin-left: 15rpx;
		}
	}
	
}
</style>